import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'my_login_controller.dart';

class MyLoginPage extends StatelessWidget {
  final controller = Get.find<MyLoginController>();
  MyLoginPage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("登录"),
      ),
      body: Container(
        width: Get.width,
        color: const Color(0xFFEFEFF4),
        child: _bodyContent(context),
      ),
    );
  }

  Widget _bodyContent(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          padding: const EdgeInsets.fromLTRB(30, 20, 30, 24),
          child: const Text(
            "你好，欢迎使用",
            style: TextStyle(
              color: Color(0xFF101010),
              fontSize: 20,
            ),
          ),
        ),
        Visibility(
          visible: controller.realmIsShow.value,
          child: _inputItem("IP或域名", controller.realmTextEditingController),
        ),
        const SizedBox(height: 10),
        _inputItem("用户名", controller.usernameTextEditingController),
        const SizedBox(height: 1),
        _inputItem(
          "密码",
          controller.passwordTextEditingController,
          obscureText: true,
        ),
        const SizedBox(height: 60),
        agreeContent(context),
        const SizedBox(height: 30),
        _loginButton(),
      ],
    );
  }

  Widget _inputItem(String title, TextEditingController textEditingController,
      {bool obscureText = false}) {
    return Container(
      padding: const EdgeInsets.fromLTRB(30, 0, 30, 0),
      height: 40,
      width: Get.width,
      color: Colors.white,
      child: Row(
        children: [
          Container(
            width: 100,
            height: 40,
            alignment: Alignment.centerLeft,
            child: Text(
              title,
              style: const TextStyle(
                color: Color(0xFF101010),
                fontSize: 16,
              ),
            ),
          ),
          Expanded(
            child: TextField(
              autofocus: false,
              controller: textEditingController,
              // keyboardType: TextInputType.phone,
              decoration: InputDecoration(
                contentPadding: const EdgeInsets.all(0),
                hintText: "请输入$title",
                hintStyle: const TextStyle(
                  fontSize: 16,
                ),
                // border: const OutlineInputBorder(
                //   borderSide: BorderSide(
                //     color: Colors.transparent,
                //   ),
                // ),
                // disabledBorder: const OutlineInputBorder(
                //   borderSide: BorderSide(
                //     color: Colors.transparent,
                //   ),
                // ),
                enabledBorder: const OutlineInputBorder(
                  borderSide: BorderSide(
                    color: Colors.transparent,
                  ),
                ),
                focusedBorder: const OutlineInputBorder(
                  borderSide: BorderSide(
                    color: Colors.transparent,
                  ),
                ),
                counterText: "",
              ),
              obscureText: obscureText,
            ),
          )
        ],
      ),
    );
  }

  Widget agreeContent(BuildContext context) {
    return Obx(
      () => Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          GestureDetector(
            onTap: () {
              controller.agreeSelect.value = !controller.agreeSelect.value;
            },
            child: Image.asset(
              controller.agreeSelect.value
                  ? "images/login_select_on.png"
                  : "images/login_select_off.png",
              package: "flutter_base_library",
              width: 15,
              height: 15,
            ),
          ),
          const SizedBox(width: 8),
          RichText(
            //必传文本
            text: TextSpan(
              text: "我已经阅读并同意",
              style: const TextStyle(color: Color(0xFFBBBBBB)),
              children: [
                TextSpan(
                  text: "服务协议与隐私政策",
                  style: const TextStyle(color: Colors.blueAccent),
                  recognizer: TapGestureRecognizer()
                    ..onTap = () {
                      controller.agreementClicked();
                    },
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _loginButton() {
    return Container(
      width: Get.width,
      height: 50,
      padding: const EdgeInsets.fromLTRB(30, 0, 30, 0),
      child: ElevatedButton(
        onPressed: () {
          controller.loginButtonClicked();
        },
        style: ButtonStyle(
          padding: MaterialStateProperty.all(EdgeInsets.zero),
          backgroundColor: MaterialStateProperty.all(
            const Color(0xFF0055A4),
          ),
          shape: MaterialStateProperty.all(
            RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(5),
            ),
          ),
        ),
        child: const Text(
          "登录",
          style: TextStyle(
            fontSize: 18,
          ),
        ),
      ),
    );
  }
}
